<template>
    <div>
        <h4>路由模块</h4>
        <ul>
            <li>在项目创建时选择路由模块，会自动完成集成【模块安装、配置文件生成】</li>
            <li>
                路由手动集成(几乎不用)
                <ol>
                    <li>安装路由模块: npm install vue-router --save|-S </li>
                    <li>
                        基于模块化规则构建路由配置的定义模块: src/router/index.js<br>
                        + 路由配置包含:路由功能配置 和 路由表配置；基于配置不同也会将路由表配置进行独立文件分解<br>
                        + 路由功能配置:路由模式设置、路由激活样式设置、路由的滚动控制、路由默认页面定义 …… <br>
                        + 路由表:url地址和组件的对应关系配置
                    </li>
                    <li>在main.js中加载路由模块文件返回的路由对象，因为vue的路由是基于vue插件规则开发，所以通过app.use方法进行集成</li>
                    <li>路由功安装完成，组件中通过路由扩展全局组件 RouterLink 进行导航切换，通过 RouterView 进行动态组件管理</li>
                </ol>
            </li>
        </ul>
        <h5>路由组件RouterLink和RouterView相关配置</h5>
        <ol>
            <li>
                RouterLink的to属性用于定义和描述路由中组件对应的地址<br> 
                当RouterLink被点击时,RouterLink直接修改url的地址<br>
                RouterView组件内监听了 hashchange 变化事件，该事件在RouterLink更新地址时触发，RouterView会重新选择对应的组件进行渲染
            </li>
            <li>
                RouterLink组件是一个具有分发功能的全局组件，可以通过分发方式完成标签模拟 <br>
                标签模拟存在两种方式：1.修改生成的a标签内部的标签结构；2.定义custom属性，让RouterLink直接使用自定义标签 <br>
                标签模拟使用第二种方式是，会丢失切换导航的功能，但可以通过 作用域分发 回传的事件进行修复;<br>
                + 回传数据包含 href 组件导航地址, route 路由配置对象, navigate 地址切换方法, isActive 路由激活样式, isExactActive 路由激活样式
            </li>
            <li>
                vue-router模块为导航组件RouterLink提供了样式默认的 空样式名 .router-link-active .router-link-exact-active <br>
                在RouterLink生成的导航标签上，随着url地址的切换变化，每个RouterLink组件都会自动判断地址和to属性取值是否相同，
                并根据结果在对应的标签上增加激活样式 <br>
                激活样式名 .router-link-active .router-link-exact-active ，在路由配置选项中可以通过专用配置属性进行样式名称修改<br>
                <pre>
                    let router = createRouter({
                        // linkActiveClass:"router-link-active",
                        linkActiveClass:"active",
                        // linkExactActiveClass:"router-link-exact-active",
                        linkExactActiveClass:"exact-active",
                    });
                </pre>
            </li>
            <li>
                .router-link-active .router-link-exact-active 的样式区分 <br>
                .router-link-active : 该样式的判断依据是基于 RouterLink to 属性的路径包含关系进行判断，一般用于子路由激活 <br>
                .router-link-exact-active : 该样式的判断依据是基于 RouterLink to 属性的路径的完全匹配关系进行判断，用于完整导航描述上
            </li>
        </ol>
        <p>RouterLink的使用规则</p>
        <div class="menu">
            <a href="#/default">欢迎页-a标签</a>

            <RouterLink to="/default">欢迎页- RouterLink默认规则</RouterLink>

            <RouterLink to="/default">
                <button type="button">欢迎页 - RouterLink默认分发</button>
            </RouterLink>

            <RouterLink to="/default" :custom="true">
                <!-- <template v-slot:default="{ href,route,navigate }">
                    <p>{{href}}</p>
                    <p>{{route}}</p>
                    <p>{{navigate}}</p>
                    <button type="button">欢迎页</button>
                </template> -->
                <template v-slot:default="{ navigate }">
                    <button type="button" @click="navigate()">欢迎页 - RouterLink默认作用域分发</button>
                </template>
            </RouterLink>

            <!-- 组件分发定义时，如果组件只存在一个 默认作用域分发，v-slot可以直接定义在组件标签上 -->
            <RouterLink to="/default" :custom="true" v-slot="{ navigate }">
                <button type="button" @click="navigate()">欢迎页 - RouterLink默认作用域分发</button>
            </RouterLink>
        </div>

        <p>RouterLink的激活样式</p>
        <div class="menu">
            <RouterLink to="/router">路由页面 - 默认激活样式</RouterLink>
            <RouterLink to="/router" :custom="true" v-slot="{ navigate,isActive,isExactActive }">
                <!-- <p>{{ isActive }}</p>
                <p>{{ isExactActive }}</p> -->
                <button type="button" 
                    :class="{ active:isActive,'exact-active':isExactActive }"
                    @click="navigate()"
                >路由页面 - 作用域激活样式</button>
            </RouterLink>
        </div>

        <p>子路由的样式控制</p>
        <div class="menu">
            <RouterLink to="/router/one">路由页面-子页面1</RouterLink>
            <RouterLink to="/router/two">路由页面-子页面2</RouterLink>
        </div>
        <div class="box">
            <RouterView></RouterView>
        </div>
    </div>
</template>

<script>
    export default {
        
    }
</script>

<style lang="scss" scoped>
.menu{
    display: flex;
    flex-flow: row wrap;
    margin-bottom: 12px;
    padding: 10px;
    border: 1px solid #ccc;
}
.menu > *{
    margin: 0px 6px;
}
.active,.exact-active,.router-link-active,.router-link-exact-active{
    color: red!important;
}
.box{
    border: 1px solid #999;
    min-height: 600px;
    padding: 10px;
}
</style>